<template>
	<!-- 导航栏 -->
	<uni-nav-bar shadow left-icon="left" title="预约成功" @clickLeft="back"/>
	<!-- 核销码部分 -->
	 <view class="container"  v-if="reservationList">
		 <view class="top">
		 	<view>核销码：{{reservationList.verificationCode}}</view>
		 	 <canvas id="qrcode" canvas-id="qrcode" style="width: 100px;height: 100px; display: block;margin-left: auto;margin-right: auto;"></canvas>
		 </view>
	    <view class="section">
	      <text class="title">维修信息</text>
	      <view class="info-item">
	        <text class="label">维修单号:</text>
	        <text class="value">{{ reservationList.id }}</text>
	      </view>
	      <view class="info-item">
	        <text class="label">维修状态:</text>
			<text class="value">{{ getStatusText(reservationList.status)}}</text>
	      </view>
	      <view class="info-item">
	        <text class="label">车主姓名:</text>
	        <text class="value">{{ reservationList.name }}</text>
	      </view>
	      <view class="info-item">
	        <text class="label">联系方式:</text>
	        <text class="value">{{ reservationList.phone }}</text>
	      </view>
	      <view class="info-item">
	        <text class="label">维修方式:</text>
	        <text class="value">{{ getTypeText(reservationList.type) }}</text>
	      </view>
	      <view class="info-item" v-show="reservationList.type == 1">
	        <text class="label">取车位置:</text>
	        <text class="value">{{ reservationList.location }}</text>
	      </view>
	      <view class="info-item">
	        <text class="label">预约日期:</text>
	        <text class="value">{{ reservationList.reservationTime }}</text>
	      </view>
	      <view class="info-item">
	        <text class="label">提交日期:</text>
	        <text class="value">{{ reservationList.submitTime }}</text>
	      </view>
	    </view>
	    <view class="section">
	      <text class="title">车辆信息</text>
	      <view class="info-item">
	        <text class="label">车辆类型:</text>
	        <text class="value">{{ reservationList.carTypeId }}</text>
	      </view>
	      <view class="info-item">
	        <text class="label">车牌号:</text>
	        <text class="value">{{ reservationList.carNum}}</text>
	      </view>
	     <view class="image-item" >
	        <text class="label">整车照片:</text>
	        <image :src="reservationList.vehiclePhotos" mode=""></image>
	      </view>
		  <view class="image-item" >
			<text class="label">维修部位照片:</text>
					<image 
					v-for="(photo, index) in reservationList.repairPhotos.split(',')" 
					:key="index" 
					:src="photo.trim()" 
					mode=""
					></image>
			</view>
	    </view>
		
		<button class="btn" @click="but" v-show="reservationList.status == 0">取消订单</button>
	</view>

</template>

<script setup>
import baseUrl from '../../utils/urlConfig.js'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

// 二维码 生成
import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js'
function onReady(e) {
// 获取uQRCode实例
var qr = new UQRCode();
// 设置二维码内容
qr.data = e;
// 设置二维码大小，必须与canvas设置的宽高一致
qr.size = 100;
// 调用制作二维码方法
qr.make();
// 获取canvas上下文
var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
// 设置uQRCode实例的canvas上下文
qr.canvasContext = canvasContext;
// 调用绘制方法将二维码图案绘制到canvas上
qr.drawCanvas();
}
// 预约状态
function getStatusText(status) {
  const statusMap = {
    '0': '已预约',
    '1': '进行中', 
    '2': '已完成'
  }
  return statusMap[status] || status
}
// 预约类型
function getTypeText(type) {
  const typeMap = {
    '0': '到店维修',
    '1': '上门维修'
  }
  return typeMap[type] || type
}

const reservationList =ref()

function back(){
	uni.navigateBack()
	// uni.navigateTo({
	// 	 url: `/pages/my/repair/Repair`
	// })
}
// 取消订单
function but(){
	uni.showModal({
	  title: '提示',
	  content: '确认要取消该维修订单吗？',
	  success: () => {
	   reservationList.value.deleted=1
	   console.log(reservationList.value)
	   uni.request({
	   	url: baseUrl + '/yyq/reservation',
	   	method: 'put',
	   	data: reservationList.value,
	   	header: {
	   		Authorization: uni.getStorageSync('Token')
	   	},
	   	success: (res) => {
	   		if (res.data && res.data.code === 200) { // 检查后端返回的状态码
	   			//取消成功提示 跳转主页
	   			uni.showToast({
	   				title: '取消成功',
	   				icon: 'none',
	   				duration: 1000
	   			});
	   			// 跳转主页
	   			setTimeout(() => {
	   				uni.switchTab({
	   				url: '/pages/my/repair/Repair'
	   				});
	   			}, 1500);
	   		}
	   	},
	   });
	  }
	});
}

// 获取信息
const queryParams = ref({
	id: '',
})
onLoad((options) => {
  queryParams.value.id= options.id
  queryByVerificationCode ()
  
  
    // 确保数据加载完成后再生成二维码
	setTimeout(() => {
    if(reservationList.value && reservationList.value.verificationCode) {
      onReady(reservationList.value.verificationCode)
    }
  }, 300)
//   setTimeout(() => {
//     onReady(reservationList.value.verificationCode)
//   }, 300)
})
//  定义一个方法根据id 和编码 查
function queryByVerificationCode() {
	console.log(queryParams.value.id)
	uni.request({
		url: baseUrl + '/yyq/reservation/'+queryParams.value.id,
		method: 'get',
		header: {
			Authorization: uni.getStorageSync('Token')
		},
		success: (res) => {
			if (res.data && res.data.code === 200) { // 检查后端返回的状态码
			// console.log(res.data)
				reservationList.value = res.data.data
				// console.log(reservationList.value)
			}
		},
	});
}



</script>

<style>
page {
  background-color: #ffffff;
  height: 100%;
}
.top{
	text-align: center;
	font-size: 20px;
	font-weight: 600;
}   
.top view{
	margin-bottom: 10px;
}
.title{
	font-weight: 600;
	font-size: 18px;
}
.container{
	padding:10px 30px;
}
.info-item {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
.info-item .label {
  width: 100px; /* 固定标签宽度 */
  margin-right: 10px;
}
.info-item .value {
  flex: 1;
}
.image-item image{
	width: 100px;
	height: 100px;
	margin-right: 5px;
}
.image-item .label{
	display: block;
	margin-bottom: 5px;
}
.btn{
	margin-top: 20px;
}


</style>
